<template>
  <v-card class="home">
    <v-card class="home-top">
      <!-- 待处理 -->
      <v-card class="waiting-task">
        <template>
          <v-card style="border: 2px solid rgb(65, 113, 156)">
            <v-card class="title">待处理任务</v-card>
            <v-data-table
              :headers="headers"
              :items="desserts"
              hide-default-header
              hide-default-footer
              class="elevation-1 box"
              :page.sync="pages"
              :items-per-page="itemsPerPages"
              loading-text="暂无数据"
              @page-count="pageCounts = $event"
              dense
              @click:row="handleTask($event)"
            ></v-data-table>
            <div class="text-center pt-2">
              <v-pagination v-model="pages" :length="pageCounts"></v-pagination>
            </div>
          </v-card>
        </template>
      </v-card>
      <!-- 文件查询 -->
      <v-card class="serch">
        <template>
          <v-card flat class="py-12">
            <v-card-text class="contents">
              <v-card>
                <v-btn-toggle
                  v-model="serchItem.fileproperty"
                  tile
                  group
                  multiple 
                  dense
                  class="serch-class"
                  ><span class="serch-title">文件属性</span>
                  <v-btn
                    v-for="(item, index) in filepropertydata"
                    class="btnlist"
                    x-small
                    height="32"
                    :value="item.title"
                    :key="index"
                  >
                    {{ item.title }}
                  </v-btn>
                </v-btn-toggle>
              </v-card>
              <v-card>
                <v-btn-toggle
                  v-model="serchItem.filetype"
                  tile
                  group
                  multiple 
                  dense
                  class="serch-class"
                  ><span class="serch-title">文件分类</span>
                  <v-btn
                    v-for="(item, index) in filetypedata"
                    class="btnlist"
                    :key="index"
                    x-small
                    height="32"
                    :value="item.title"
                  >
                    {{ item.title }}
                  </v-btn>
                </v-btn-toggle></v-card
              >
              <v-card>
                <v-btn-toggle
                  v-model="serchItem.language"
                  tile
                  group
                  dense
                  multiple 
                  class="serch-class"
                  ><span class="serch-title">Language</span>
                  <v-btn
                    v-for="(item, index) in languagedata"
                    class="btnlist"
                    :key="index"
                    x-small
                    height="32"
                    :value="item.title"
                  >
                    {{ item.title }}
                  </v-btn>
                </v-btn-toggle>
              </v-card>
              <v-card>
                <span class="serch-title">关键字</span>
                <input type="text" class="serch-ipt" v-model="serchItem.keyword" />
                <v-tooltip class="btn" bottom color="#fff" z-index="999">
                  <template v-slot:activator="{ on, attrs }">
                    <span
                      v-bind="attrs"
                      v-on="on"
                      class="wenhao icons iconfont icon-wenhao"
                      style="
                        padding: 0 7px;
                        color:#ddd;
                        font-size: 19px;
                      "
                    ></span>
                  </template>
                  <div class="hint">
                    <h3>关键字搜索说明</h3>
                    <p>通配符种类：*通配0-N个词 ; ？</p>
                    <p>
                      通配1个此通配符位置：可以放置条件的前端、中间和末端，例如：*very、goo*、th*nk
                    </p>
                    <p>
                      注意：支持一个字母更通配符的搭配，但不建议此方式搜索，例如：a*或者*a
                    </p>
                  </div>
                </v-tooltip>
              </v-card>
              <v-card class="btns">
                <v-btn class="btn" depressed
                  ><span style="display: block">文件查询</span>
                  <span>Search title</span>
                </v-btn>
                <v-btn class="btn" depressed>
                  <span style="display: block">全文检索</span>
                  <span>Full text retrieval</span>
                </v-btn>
              </v-card>
            </v-card-text>
          </v-card>
        </template>
      </v-card>
    </v-card>
    <!-- 最新消息 -->
    <v-card class="home-bottom">
      <v-card class="home-bottom-list">
        <v-row>
          <infoItem></infoItem>
          <infoItem modelName="技术\故障报告"></infoItem>
          <infoItem modelName="安全信息"></infoItem>
          <infoItem modelName="培训信息"></infoItem>
        </v-row>
      </v-card>
    </v-card>
  </v-card>
</template>
<script>
import infoItem from "../../public/info.vue";
export default {
  components: { infoItem },
  name: "Home",
  data() {
    return {
      pages: 1,
      pageCounts: 0,
      itemsPerPages: 5,
      headers: [
        {
          text: "Dessert (100g serving)",
          align: "start",
          value: "assa",
        },
      ],
      filepropertydata: [
        { title: "全部文件" },
        { title: "保养" },
        { title: "质量" },
        { title: "技术/故障" },
        { title: "调研" },
        { title: "改造" },
        { title: "安全" },
        { title: "框架协议" },
        { title: "工程合同" },
      ],
      filetypedata: [
        { title: "全部分类" },
        { title: "管理类" },
        { title: "操作引类" },
      ],
      languagedata: [
        { title: "All" },
        { title: "Chinese version" },
        { title: "English version" },
        { title: "Japanese version" },
      ],
      desserts: [
        {
          assa: "Frozen Yogurt",
        },
        {
          assa: "Ice cream sandwich",
        },
        {
          assa: "Eclair",
        },
        {
          assa: "Cupcake",
        },
        {
          assa: "Gingerbread",
        },
        {
          assa: "Jelly bean",
        },
      ],
      serchItem: {
        fileproperty: [],
        language: [],
        filetype: [],
        keyword: "",
      },
    };
  },
  created() {},
  methods: {
    //未处理任务
    handleTask() {
      this.$router.push({
        path: `/MarkMaintain`,
      });
    },
    //
    particularsClick(item) {
      console.log(item);
    },
  },
  watch:{
    serchItem:{
      handler(old,newv){
        console.log(old,newv);
      },
      deep:true
    }
  }
};
</script>
<style lang="scss" scoped>
.btnlist {
  border: 2px solid #eee !important;
  border-radius: 4px !important;
  padding: 0 5px !important;
}
.title {
  background: rgb(32, 56, 100);
  color: #fff;
  font-size: 16px !important;
  padding-left: 10px;
  border-top-left-radius: initial !important;
  border-top-right-radius: initial !important;
}
.serch-title {
  background: rgb(0, 176, 240);
  color: #fff;
  border-radius: 5px;
  font-size: 13px;
  padding: 2px 10px;
  height: 32px;
  line-height: 30px;
  margin: 4px;
  display: inline-block;
  text-align: center;
  width: 80px;
}
.contents {
  border: 2px solid rgb(65, 113, 156);
}
.btns {
  text-align: right;
  .btn {
    margin-right: 30px;
    color: #fff;
    background: rgb(0, 112, 192);
    font-size: 13px;
    padding: 2px 5px;
  }
}
.serch-ipt {
  height: 32px;
  width: 300px;
  border: 2px solid #eee;
  border-radius: 5px;
  padding-left: 5px;
  margin-left: 5px;
}
.icon {
  display: inline-block;
  font-size: 20px;
  margin-left: 10px;
}
.v-application .py-12 {
  padding: 25px 0 !important;
}
.box {
  min-height: 168px;
}
.v-application .elevation-1 {
  box-shadow: none !important;
}
.bottom-list-items {
  border: 2px solid rgb(65, 113, 156);
  border-radius: 5px;
  .bottom-list-item {
    background: rgb(32, 56, 100);
    color: #fff;
    padding: 5px;
    font-size: 14px;
  }
}
.v-tooltip__content {
  border: 2px solid #eee !important;
  .hint {
    color: black;
    padding: 5px;
    border-radius: 5px;
    width: 400px;
    p {
      margin: 5px !important;
    }
  }
}

.wenhao.icons {
  background: unset !important;
  height: 32px;
  &:hover {
    cursor: pointer;
  }
}
</style>
